<template>
	<view class="uni-container uni-padding-wrap">
		<navBar></navBar>
		<view class="content">
			<view class="main">
				<match-media :min-width="MAX_SIZEiZE">
					<view class="title">{{$t('Page.user.pay')}}</view>
				</match-media>
				<view class="mainRecharge">
					<view class="order-top">
						<view class="orderNo">
							{{payInfo.order_sn}}
						</view>
						<view class="price-wrap">
							<view class="left">
								{{$t('Page.user.je')}}
							</view>
							<view class="right">
								{{payInfo.price}}
							</view>
						</view>
					</view>
					<view class="order-top order-center">
						<view class="order-tips">
							{{$t('Page.user.ddts')}}
						</view>
						<view class="qr-code-wrap" v-if="payInfo.pix_qrcode">
							<uqrcode ref="qrcode" canvasId="qrcode" :value="payInfo.pix_qrcode" :size="200"
								:options="options">
							</uqrcode>
						</view>
						<!-- 	<view class="order-sn">
							<text>
								<text style="color: #adadc2;">{{$t('Page.user.je')}}:</text>
								<text> {{payInfo.price}} </text>
							</text>
							<image class="coin-icon" src="@/static/coin.png"></image>
						</view> -->
						<!-- 	<view class="order-sn">
							<text>
								<text style="color: #adadc2;">{{$t('Page.user.ddh')}}:</text>
								<text>{{payInfo.order_sn}}</text>
							</text>
							<view class="copy" @tap="copyLink(payInfo.order_sn)">
								<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="26"
									color="#fff"></uni-icons>
							</view>
						</view> -->
						<!-- 	<view class="order-sn">
							<text>
								<text style="color: #adadc2;">pix:</text>
							</text>
							<text>{{payInfo && pixCode}}</text>
							<view class="copy" @tap="copyLink(payInfo.pix_qrcode)">
								<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="26"
									color="#fff"></uni-icons>
							</view>
						</view> -->
						<waves class="confirm-btn" @onTap="copyLink(payInfo.pix_qrcode)">
							{{$t('Page.user.fzpix')}}
						</waves>
						<view class="limitTime">
							<uni-icons custom-prefix="iconfont" type="icon-tixing" size="20"
								color="#F9AA1C"></uni-icons>
							<text>{{$t('Page.user.czddzt')}}：{{statusText()}}</text>
						</view>
					</view>
					<waves class="confirm-btn back-btn" @onTap="handleConfirm">
						Claro
					</waves>
					<!-- 	<view class="order-info">
						<view class="order-info-row" v-if="payInfo">
							<view class="label">

							</view>
							<view class="order-info-row-r">
								<text class="url-text">{{payInfo && pixCode}}</text>
								<view class="copy" @tap="copyLink(payInfo.pix_qrcode)">
									<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="26"
										color="#fff"></uni-icons>
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<match-media :max-width="MAX_SIZEiZE">
			<view class="tabbar">
				<tabBar :showselected="true"></tabBar>
			</view>
		</match-media>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		data() {
			return {
				MAX_SIZEiZE,
				payInfo: {},
				options: {
					margin: 8,
					// foregroundImageSrc: require('@/static/appLog.png'),
					// foregroundImageBackgroundColor: 'transparent',
					// foregroundImageBorderRadius: 5,
					// foregroundImageWidth: 30,
					// foregroundImageHeight: 30
				},
				// timer: null,
				// timeout: '00:00',
			}
		},

		computed: {
			...mapState({
				depositOrderInfo: state => state.app.depositOrderInfo
			}),
			pixCode() {
				if (this.payInfo.pix_qrcode) {
					return `${this.payInfo.pix_qrcode.slice(0,5)}${'*'.repeat(8)}${this.payInfo.pix_qrcode.slice(-5)}`
				}
			},
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.payInfo = item
			console.log("this.payInfo: ", this.payInfo);
			// this.onComponentShow()
			// this.countdown()
		},
		mounted() {
			if (this.payInfo?.pix_qrcode) {
				this.createQrcode()
			}
			setTimeout(() => {
				console.log("depositOrderInfo: ", this.depositOrderInfo);
			}, 100)
		},
		// destroyed() {
		// 	clearTimeout(this.timer)
		// 	this.timer = null
		// },
		methods: {
			// 返回充值页面
			handleConfirm() {
				uni.redirectTo({
					url: `/pages/user/wallet/wallet?inde=0`
				})
			},
			// 处理订单状态文本
			statusText() {
				if (this.payInfo.order_sn === this.depositOrderInfo.order_sn) {
					if (this.depositOrderInfo.status === 0) {
						return this.$t('Page.user.wzf')
					} else if (this.depositOrderInfo.status === 1) {
						console.log("this.depositOrderInfo.status: ", this.depositOrderInfo.status);
						return this.$t('Page.user.zfcg')
					}
				} else {
					return this.$t('Page.user.wzf')
				}
			},
			// 检查订单状态
			onComponentShow() {
				if (!this.payInfo.order_sn) return
				const {
					CHECKCHARGE
				} = this.$api
				sendMessage({
					flag: CHECKCHARGE,
					content: {
						order_sn: this.payInfo.order_sn
					}
				})
				uni.$on(CHECKCHARGE, (res) => {
					const {
						code,
						data
					} = res
					console.log("检查订单状态: ", res);
					if (code === 1 && data.status) {}
				})
			},

			createQrcode() {
				this.$refs.qrcode.make({
					success: () => {},
					fail: err => {}
				});
			},

			copyLink(data) {
				uni.setClipboardData({
					data,
					success: () => {
						uni.showToast({
							title: this.$t('Page.component.fzcg'),
							icon: 'none'
						})
					}
				});
			},

			countdown() {
				const endTime = new Date(+this.payInfo.timeout * 1000);
				this.timer = setTimeout(() => {
					const currentTime = new Date().getTime();
					const remainingTime = endTime - currentTime;
					if (remainingTime >= 0) {
						const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
							.toString().padStart(2, '0');
						const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)).toString()
							.padStart(2, '0');
						const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000).toString().padStart(2,
							'0');
						if (Number(hours) === 0) {
							this.timeout = `${minutes}:${seconds} s`
						} else {
							this.timeout = `${hours}:${minutes}:${seconds} s`
						}
						this.countdown()
					} else {
						this.timeout = `00:00 s`
						clearTimeout(this.timer)
						this.timer = null
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-btn {
		width: calc(100% - 30px);
		border-radius: 10px;
		color: #fff;
		// background: linear-gradient(90deg, #FFA337 0%, #FF650F 100%);
		background: #EBAF5B;
		padding: 10px 36px;
		font-size: 16px;
		text-align: center;
		margin: 15px auto 5px;
	}

	.back-btn {
		width: calc(100% - 60px);
		border-radius: 10px;
		color: #fff;
		background: linear-gradient(90deg, #FFA337 0%, #FF650F 100%);
		// background: #EBAF5B;
		padding: 10px 36px;
		font-size: 16px;
		text-align: center;
		margin: 20px auto 0;
	}

	.uni-container {
		min-height: 100vh;
		background: #20262d;
		padding: 66px 0px 0;
		padding-top: calc(var(--status-bar-height) + 66px);

		.content {
			margin: 0 auto;
			max-width: 1200px;
			padding: 32px;

			.main {
				max-width: 752px;

				.title {
					font-size: 16px;
					font-weight: 700;
					color: #fff;
				}

				.mainRecharge {
					border-radius: 16px;
					background: #242a32;
					margin: 16px auto 32px;
					display: flex;
					padding-top: 16px;
					padding-bottom: 16px;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;

					.order-top {
						width: calc(100% - 60px);
						margin: 0 auto;
						border: 1px solid #cccccc;
						display: flex;
						flex-direction: column;
						padding: 10px;
						border-radius: 5px;

						.orderNo {
							width: 100%;
							display: flex;
							justify-content: flex-end;
							color: #999;
							border-bottom: 1px solid #cccccc;
							margin-bottom: 10px;
							padding-bottom: 6px;
						}

						.price-wrap {
							display: flex;
							justify-content: space-between;
						}
					}

					.order-center {
						margin-top: 26px;
					}

					.order-tips {
						width: 100%;
						display: flex;

					}

					.limitTime {
						width: calc(100% - 30px);
						background-color: #302A38;
						color: #F9AA1C;
						font-size: 16px;
						padding: 10px 0;
						border-radius: 5px;
						box-sizing: border-box;
						text-align: center;
						margin-top: 26px;
						margin: 15px auto;
					}

					.tips {
						color: #fff;
						font-size: 14px;
						margin: 10px auto 0;
					}

					.qr-code-wrap {
						width: 100%;
						display: flex;
						justify-content: center;
						margin: 10px auto 0;
					}

					.copy {
						margin-left: 10px;
						cursor: pointer;
					}

					.order-sn {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 10px;
						font-size: 16px;

						.coin-icon {
							width: 30px;
							height: 30px;
							margin-left: 5px;
						}
					}

					.order-info {
						width: calc(100% - 30px);
						margin: 0 auto;
						padding: 15px;
						border-radius: 10px;
						box-sizing: border-box;
						background-color: #20262D;

						.order-info-row {
							display: flex;
							margin-top: 15px;

							.label {
								margin-right: 15px;
								font-size: 18px;
								color: #adadc2;
								text-align: right;
							}

							.order-info-row-r {
								flex: 1;
								display: flex;
								align-items: center;

								.url-text {
									word-break: break-all;
								}
							}
						}
					}

					.saveBtn {
						border-radius: 3px;
						background: #33c38f;
						padding: 8px 36px;
						margin-top: 10px;
					}
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		.uni-container {
			padding: 50px 0px 50px;
			padding-top: calc(var(--status-bar-height) + 50px);

			.content {
				padding: 0;
			}

			.chargeAmount {
				width: 33.333% !important;

				&:nth-child(4n) {
					padding-right: 16px !important;
				}

				&:nth-child(3n) {
					padding-right: 0 !important;
				}
			}
		}
	}
</style>